<template>
  <div id="wrap">
    <!-- 搜索框 -->
    <div class="search">
      <van-search v-model="value" placeholder="搜索你需要的商品" />
      <span
        ><img src="../../assets/HealthMall_img/icon订单@2x.png" alt=""
      /></span>
    </div>
    <!-- 轮播图 -->
    <div class="back_img">
      <!--  -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in banner" :key="item"
          ><img :src="item" alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 中间导航栏 -->
    <div class="grid">
      <van-grid :gutter="10" :column-num="5" :border="false">
        <van-grid-item
          style="padding: 0"
          v-for="(value, index) in imglist"
          :key="index"
          :icon="value.img"
          :text="value.context"
        />
      </van-grid>
    </div>
    <!-- 限时特价 -->
    <van-sidebar>
      <van-sidebar-item title="限时特价" />
    </van-sidebar>
    <div>
      <div class="time_sale_img">
        <ul class="ul">
          <li
            v-for="(value, index) in xstj"
            :key="index"
            class="li"
            @click="gotodetail(value)"
          >
            <img :src="value.img" alt="" />
          </li>
        </ul>
      </div>
      <div class="time_sale_text">
        <ul class="ul">
          <li
            v-for="(value, index) in xstj"
            :key="index"
            class="li"
            @click="gotodetail(index)"
          >
            <p>{{ value.title }}</p>
            <span v-if="value.hotsale == 1"
              >￥{{ value.price }}
              <span class="hotsale">特价</span>
            </span>
            <span v-else>￥{{ value.price }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="line"></div>
    <!-- 精选活动 -->
    <van-sidebar>
      <van-sidebar-item title="精选活动" />
    </van-sidebar>
    <div class="activities">
      <ul>
        <li v-for="(item, index) in active" :key="index">
          <img :src="item.img" alt="" />
          <p class="p_title">{{ item.title }}</p>
          <p class="p_text">{{ item.text }}</p>
        </li>
      </ul>
    </div>
    <!-- 分割线 -->
    <div class="line"></div>
    <!-- 男性好药推荐 -->
    <van-sidebar>
      <van-sidebar-item title="男性好药推荐" />
    </van-sidebar>
    <div class="medicine">
      <ul class="ul">
        <li v-for="(value, index) in nxhy" :key="index" class="li">
          <img :src="value" alt="" />
        </li>
      </ul>
    </div>
    <!-- 分割线 -->
    <div class="line"></div>
    <!-- 优质店铺 -->
    <van-sidebar>
      <van-sidebar-item title="优质店铺" />
    </van-sidebar>
    <div class="store">
      <img src="../../assets/HealthMall_img/logo@2x.png" alt="" />
      <van-cell
        center
        title="康爱多大药房"
        value="进店 >"
        label="广州市白云区云景路4号102铺之二"
      />
    </div>

    <div>
      <div class="time_sale_img">
        <ul class="ul">
          <li v-for="(value, index) in yhdp" :key="index" class="li">
            <img :src="value.img" alt="" />
          </li>
        </ul>
      </div>
      <div class="time_sale_text">
        <ul class="ul">
          <li v-for="(value, index) in yhdp" :key="index" class="li">
            <p>{{ value.title }}</p>
            <span v-if="value.hotsale == 1"
              >￥{{ value.price }}
              <span class="hotsale">特价</span>
            </span>
            <span v-else>￥{{ value.price }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { mapState, mapActions } from "vuex";

export default {
  setup() {
    // 变量
    const router = useRouter();
    const imglist = reactive([
      {
        img: require("../../assets/HealthMall_img/icon营养保健@2x.png"),
        context: "营养保健",
      },
      {
        img: require("../../assets/HealthMall_img/icon男性健康@2x.png"),
        context: "男性健康",
      },
      {
        img: require("../../assets/HealthMall_img/icon签到0元领@2x.png"),
        context: "签到0元领",
      },
      {
        img: require("../../assets/HealthMall_img/icon心脑血管@2x.png"),
        context: "心脑血管",
      },
      {
        img: require("../../assets/HealthMall_img/icon医疗器械@2x.png"),
        context: "医疗器械",
      },
      {
        img: require("../../assets/HealthMall_img/icon肠胃用药@2x.png"),
        context: "肠胃用药",
      },
      {
        img: require("../../assets/HealthMall_img/icon呼吸科@2x.png"),
        context: "呼吸科",
      },
      {
        img: require("../../assets/HealthMall_img/icon皮肤科@2x.png"),
        context: "皮肤科",
      },
      {
        img: require("../../assets/HealthMall_img/icon风湿骨科@2x.png"),
        context: "风湿骨科",
      },
      {
        img: require("../../assets/HealthMall_img/icon体验疫苗@2x.png"),
        context: "体验疫苗",
      },
    ]);
    const value = ref("");
    // 方法
    const gotodetail = (value) => {
      // console.log(value.id);
      router.push("/home/detail/" + value.id);
    };
    //  暴露引用
    return {
      value,
      imglist,
      gotodetail,
    };
  },
  computed: {
    ...mapState({
      xstj: (state) => state.healthMailModul.xstj,
      active: (state) => state.healthMailModul.active,
      banner: (state) => state.healthMailModul.banner,
      nxhy: (state) => state.healthMailModul.nxhy,
      yhdp: (state) => state.healthMailModul.yhdp,
    }),
  },
  methods: {
    ...mapActions("healthMailModul", ["gethealthmallApi"]),
  },
  mounted() {
    this.gethealthmallApi();
  },
};
</script>

<style lang="less">
@import "../../assets/css/store.less";
#wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: scroll;
  // width: 375.2px;
  // white-space: nowrap;

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
}
</style>
